<template>
	<view class="content">
		<view class="top_title">
			标题
		</view>
		<view class="detail_div">
			<view class="detail_item">
				<view class="detail_left">
					<text>年份：</text>
					<text style="color: #333333;">{{dataList.year}}</text>
				</view>
				
				<view class="detail_left">
					<text>标题：</text>
					<text style="color: #333333;">{{dataList.title}}</text>
				</view>				
			</view>		
				
			<view class="detail_item">
				<view class="detail_left">
					<text>总分：</text>
					<text style="color: #333333;">{{dataList.sum}}</text>
				</view>
				
				<view class="detail_left">
					<text>作答：</text>
					<text style="color: #333333;">{{dataList.duration}}</text>
				</view> 		
			</view>	
			
			
			  <view class="detail_item">
				<view class="detail_left">
					<text style="color:#dd1e0a;">{{dataList.count}}</text>
					<text style="color: #333333;">人做过</text>
				</view>
				
				<view class="detail_left">
					<text style="color:#dd1e0a;">{{dataList.comment}}</text>
					<text style="color: #333333;">人评论</text>
				</view>				
			</view>  
				
				<view class="btn_div">
					<view @click="practiceMode">练习模式</view>
					<view @click="testMode">考试模式</view>
				</view>
		</view>
		
		<view class="intro_div">
			<view class="intro_title">
				题型介绍:
			</view>
			<view class="intro_item">
				<view>选择题<text style="font-size: 22rpx; margin-left: 20rpx;">(每题2分,共20题,共40分)</text></view>
				<view>一、选择题 1-20小题每小题2分,共40分，在每小题给出的选项中，只有~项是符合要求的，按照要求选择</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id;
			console.log(this.id)
		},
		data(){
			return{
				id:0,
				dataList:{},
			}
		},onReady: function() {
			uni.request({
				url: this.baseUrl+'getPaperDetails', //仅为示例，并非真实接口地址。
				method:'GET',
				data: {
					pid:this.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
				},
				success: (res) => {
					 this.dataList=res.data.paperDetails;
					
				},
			});
		},
		methods:{
			practiceMode:function(){
				//练习模式
				uni.navigateTo({
					url:"../testModel/testMode?model=practice&id="+this.id
				});
			},
			testMode:function(){
				//考试模式
				uni.navigateTo({ 
					url:"../testModel/testMode?model=test&id="+this.id
				})
			}
		}
	}
</script>

<style>
	.top_title{
		font-size: 28rpx;
		color: #333333;
		margin-top: 28rpx;
		margin-bottom: 28rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.detail_div{
		background: #FFFFFF;
		margin-left: 20rpx;
		margin-right:20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 10rpx;
	}
	.detail_div .detail_item{
		height: 52rpx;
		font-size: 24rpx;
		color: #646464;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		line-height: 52rpx;
	}
	.detail_div .detail_item .detail_left{
		flex: 1;
		padding-left: 40rpx;
	}
	.detail_div .detail_item .detail_left text:nth-child(2){
		margin-left: 10rpx;
	}
	.detail_div .btn_div{
		display: flex;
		padding-left: 40rpx;
		padding-right: 40rpx;
		height: 70rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}
	.detail_div .btn_div view:nth-child(1){
		background: linear-gradient(to right,#f6ca44,#f79500);
		height: 100%;
		flex: 1;
		border-top-left-radius: 35rpx;
		border-bottom-left-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	.detail_div .btn_div view:nth-child(2){
		background: linear-gradient(to right,#f96735,#e52300);
		height: 100%;
		flex: 1;
		border-top-right-radius: 35rpx;
		border-bottom-right-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.intro_div{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		
	}
	.intro_div .intro_title{
		height: 66rpx;
		padding-left: 20rpx;
		color: #333333;
		font-size: 26rpx;
		line-height: 66rpx;
		margin-top: 10rpx;
	}
	.intro_div .intro_item {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		
	}
	.intro_div .intro_item view:nth-child(1){
		font-size: 26rpx;
		color: #333333;
		
	}
	.intro_div .intro_item view:nth-child(2){
		font-size: 26rpx;
		color: #666666;
		margin-top: 20rpx;
		
	}
</style>
